<template>
    <div class="prodetail">
      <van-nav-bar fixed title="商品详情" left-arrow @click-left="router.back()" class="nav-bar"/> 

      <van-swipe :autoplay="3000" @change="onChange">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img :src="image.external_url" alt="">
        </van-swipe-item>

        <template #indicator>
          <div class="custom-indicator">
            {{ current + 1 }} / {{ images.length }}
          </div>
        </template>
      </van-swipe>

      <!-- 商品说明 -->
      <div class="info">
        <div class="title">
          <div class="price">
            <span class="new-price">￥{{ detail.goods_price_min }}</span>
            <span class="old-price">￥{{ detail.goods_price_max }}</span>
          </div>
          <div class="sellcount">
              已售出{{ detail.goods_sales }}件
          </div>
        </div>

        <div class="msg text-ellipsis">
            {{ detail.goods_name }}
        </div>
        
        <div class="service">
          <div class="left-words">
            <span><van-icon name="passed">七天无理由退货</van-icon></span>
            <span><van-icon name="passed">48小时发货</van-icon></span>
          </div>
          <div class="right-icon">
            <van-icon name="arrow" />
          </div>
        </div>

      </div>

      <!-- 商品评价 -->
      <div class="comment">
        <div class="comment-title">
          <div class="left">商品评价({{ total }}条)</div>
          <div class="right">查看全部 <van-icon name="arrow" /></div>
        </div>
        <div class="comment-list">
          <div class="comment-item" v-for="item in comment" :key="item.id">
            <div class="top">
              <img :src="item.user.avatar_url || defaultImg" alt="">
              <div class="name">{{ item.user.nick_name }}</div>
              <van-rate :size="15" :value="item.score / 2" color="#ffd21e" void-icon="star" />
            </div>
            <div class="content">
              {{ item.content }}
            </div>
            <div class="time">{{ item.create_time }}</div>
          </div>
        </div>
      </div>

      <!-- 商品描述 -->
      <div class="desc" v-html="detail.content">
      </div>

      <!-- 底部 -->
      <div class="footer">
        <div class="icon-home" @click="router.push('/home')">
          <van-icon name="wap-home" />
          <span>首页</span>
        </div>
        <div class="icon-cart" @click="router.push('/cart')">
          <span v-if="cartTotal > 0" class="num">{{ cartTotal }}</span>
          <van-icon name="shopping-cart" />
          <span>购物车</span>
        </div>
        <button class="btn-buy" @click="btnBuy">立即购买</button>
        <button class="btn-add" @click="btnAdd">加入购物车</button>
      </div>
    </div>


    <!-- 弹窗 -->
    <van-action-sheet v-model:show="showPannel" :title="mode === 'btnAdd' ? '加入购物车' : '立即购买' ">
      <div class="product">
        <div class="product-title">
            <div class="left">
            <img :src="detail.goods_image" width="100%" alt="" srcset="">
          </div>
          <div class="right">
            <div class="price">
              <span>$</span>
              <span class="price-now">{{ detail.goods_price_min }}</span>
            </div>
            <div class="count">
              <span>库存</span>
              <span class="count-now">{{ detail.stock_total }}</span>
            </div>
          </div>
        </div>
        
        <div class="num-box">
          <span>数量</span>
          <CountBox v-model:count="count"></CountBox>
        </div>

        <!-- 有库存才显示提交按钮 -->
        <div class="showbtn" v-if="detail.stock_total > 0">
          <div class="btn" v-if="mode === 'btnAdd'" @click="addCart">加入购物车</div>
          <div class="nowbtn" v-else>立即购买</div>
        </div>
        <div class="hienbtn" v-else>该商品已抢完</div>
      </div>

    </van-action-sheet>

    

  </template>
  
  <script setup lang="ts">
  import { useRouter, useRoute } from 'vue-router'
  import { useUserStore } from '@/stores/user'
  import { ref, computed, onMounted } from 'vue'
  import { getProductDetailApi, getProductCommentApi } from '@/api/product'
  import defaultAvatar from '@/assets/images/default-avatar.jpg'
  import CountBox from '@/components/CountBox.vue'
  import { showConfirmDialog, showToast } from 'vant';
  import { addCartApi } from '@/api/cart'

  
  const router = useRouter()
  const route = useRoute()
  const userStore = useUserStore()

  const images = ref([])

  const current = ref(0)
  const goodsId = ref(0)
  const detail = ref({})

  const total = ref()
  const comment = ref([])
  const defaultImg = ref(defaultAvatar)
  const showPannel = ref(false) // 控制弹窗
  const mode = ref() // 控制按钮
  const count = ref(1)
  const cartTotal = ref(0) // 购物车数量

  const onChange = (index: number) => {
    current.value = index
  }
  const getProductDetail = async () => {
    goodsId.value = route.params.id
    const { data: {detail: detailData}} = await getProductDetailApi(goodsId.value)
    detail.value = detailData
    images.value = detailData.goods_images

  }
  const getProductComment = async () => {
    const { data: { list: commentData, total: totalData} } = await getProductCommentApi(goodsId.value, 5)
    comment.value = commentData
    total.value = totalData
  }
  const btnBuy = () => {
    mode.value = 'btnBuy'
    showPannel.value = true
  } 
  const btnAdd = () => {
    mode.value = 'btnAdd'
    showPannel.value = true
  } 
  const addCart = async () => {
    // 判断token是否存在 不在弹窗确认,在请求操作
    if (!userStore.getToken) {
      showConfirmDialog({
        title: '温馨提示',
        message:
          '请先登录',
        confirmButtonText: '去登录',
        cancelButtonText: '在逛逛',
      })
        .then(() => {
          // 跳转到登录页面,并且带上参数
          router.push({
            path: '/login',
            query: {
              redirect: route.fullPath
            }
          })
        })
        .catch(() => {
          // on cancel
        });
    } else {
      // 这里的接口有问题
      // const res = await addCartApi(goodsId.value, count.value, detail.value.skuList[0].goods_sku_id)
      cartTotal.value = 10;
      showToast('加入购物车成功')
      showPannel.value = false
    }

  }

  onMounted(() => {
    getProductDetail()
    getProductComment()
  })
  </script>
  
  <style scoped lang="scss">
  .prodetail{
    padding-top: 46px;
    .nav-bar {
      z-index: 999;
    }
    ::v-deep(.van-icon-arrow-left) {
        color: #333;
    }
    .van-swipe{
      padding-top: 46px;
      width: 100%;
      z-index: 999;
      position: relative;
      img {
        width: 100%;
        height: 100%;
      }
      .custom-indicator {
        position: absolute;
        right: 10px;
        bottom: 10px;
        padding: 2px 5px;
        font-size: 12px;
        color: #fff;
        background: rgba(0, 0, 0, 0.3);
      }
    }

    .info {
      padding: 10px;
      .title {
        display: flex;
        justify-content: space-between;
        .price {
          .new-price {
            font-size: 20px;
            color: #ffa900;
          }
          .old-price {
            font-size: 14px;
            color: #999;
            text-decoration: line-through;
          }
          .sellcount {
            font-size: 14px;
            color: #999;
          }
        }
      }
    }
    
    .msg {
      font-size: 14px;
      line-height: 30px;
      margin-top: 10px;
    }

    .service {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40px;
      margin-top: 10px;
      font-size: 16px;
      background-color: #fafafa;
      .left-words {
        span {
          margin-right: 10px;
        }
        .van-icon {
          color: #ffa900;
          margin-right: 5px;
        }
      }
    }

    .comment {
      padding: 10px;
      .comment-title {
        display: flex;
        justify-content: space-between;
        .right {
          color: #959595;
        }
      }

      .comment-item {
        font-size: 14px;
        line-height: 30px;
        .top {
          height: 30px;
          display: flex;
          align-items: center;
          margin-top: 20px;
          img {
            width: 20px;
            height: 20px;
          }
          .name {
            margin: 0 10px;
          }
        }
        .time {
          color: #999;
        }
      }
    }

    .desc {
      width: 100%;
      margin-bottom: 65px;
      overflow-x: hidden; /* 添加这行，防止横向滚动 */
      
      /* 处理所有内容，包括图片、表格等 */
      * {
          max-width: 100% !important; /* 强制所有元素不超过容器宽度 */
          box-sizing: border-box;
      }
    }

    .footer {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 55px;
      background-color: #fff;
      border-top: 1px solid #ccc;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .icon-home, .icon-cart {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        .van-icon {
          font-size: 24px;
        }
      }
      .icon-cart {
        position: relative;
        padding: 0 6px;
        .num {
          position: absolute;
          top: -2px;
          right: 0;
          display: block;
          min-width: 12px;
          padding: 0 4px;
          background-color: #ee0a24;
          border-radius: 50%;
          color: #fff;
          z-index: 999;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .btn-add,.btn-buy {
        height: 36px;
        line-height: 36px;
        width: 120px;
        border-radius: 18px;
        background-color: #ffa900;
        text-align: center;
        color: #fff;
        font-size: 14px;
        border: none;
        outline: none;
      }
      .btn-buy {
        background-color: #fe5630;
      }
    }
  }

  .product {
    .product-title {
      padding: 10px;
      display: flex;
      .left {
        width: 80px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        flex: 1;
        padding-left: 10px;
        .price {
          font-size: 18px;
          color: #ffa900;
        }
      }
    }
    .num-box {
      padding: 10px;
      display: flex;
      justify-content: space-between;
    }
    .showbtn {
      padding: 20px 0;
      .btn,.nowbtn {
        background-color: #ffa900;
        color: #fafafa;
        width: 80%;
        height: 40px;
        border-radius: 20px;
        margin: 0 auto;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
      }
    }
    .hienbtn {
      width: 80%;
      height: 40px;
      border-radius: 20px;
      text-align: center;
      line-height: 40px;
      font-size: 14px;
      background-color: #999;
      margin: 10px auto;
    }
  }

  .content {
    padding: 16px 16px 160px;
  }
  </style>  
